<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <textarea id="demo" cols="30" rows="10"></textarea>
</body>
<script>
    // 键盘事件  (按键控制 按键输入)
    // onkeydown  键盘按键按下时触发(所有按键均可触发 fn除外)
    // onkeyup    键盘按键松开时触发(所有按键均可触发 fn除外)
    // onkeypress  键盘按键按下并松开时触发(写入字符(字母 数字 标点符号 enter)相关内容可以触发) 

    // 键盘事件的常见绑定方式
    // 1. 绑定给文档 => 页面上任何位置均可以触发(按键控制)
    // 2. 绑定内文本框(input textarea) => 输入内容时触发(按键输入)

    //  事件函数中可以接收一个形参 => 表示事件发生时的相关信息  => 事件对象(e:event)
    // key: 返回按键对应的字符
    // keyQ: 返回键盘符(对应的按键)
    // document.onkeydown = function (e) {
    //     // console.log(e);
    //     console.log("键盘按键按下", e.key, e.code);
    // }
    // document.uonkeyup = function (e) {
    //     console.log("键盘按键松开", e.key, e.code);
    // }

    var demo = document.getElementById("demo");

    // demo.onkeydown = function (e) {
    //     console.log("键盘按键按下", e.key, e.code);
    // }
    // demo.onkeyup = function (e) {
    //     console.log("键盘按键松开", e.key, e.code);
    // }


    demo.onkeypress = function (e) {
        console.log("键盘按键按下", e.key, e.code);
    }






</script>

</html>